<template>
  <el-dialog title="编辑"
             v-model="visible"
             @close="close"
             :close-on-click-modal="false"
             class="form">
    <el-form :model="formData" ref="formRef">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="分类排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入数字"/>
      </el-form-item>
      <el-form-item label="是否使用" prop="status">
        <el-select v-model="formData.status" placeholder="使用状态">
          <el-option v-for="item in Dic.isShow()"
                     :key="item.value"
                     :label="item.text"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="fzrId">
        <el-select v-model="formData.fzrId" placeholder="选择负责人" filterable>
          <el-option v-for="item in userList"
                     :key="item.id"
                     :label="item.nickName"
                     :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload drag style="width: 100%"
                   action="/aries/api/expo/upload"
                   :show-file-list="false"
                   :on-success="upload">
          <el-image v-if="formData.imageUrl" :src="formData.imageUrl"/>
          <el-icon v-else class="el-icon--upload">
            <component is="uploadFilled"/>
          </el-icon>
          <template #tip>
            <div class="el-upload__tip">
              文件大小最大10MB，当天的同名文件会被覆盖
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="saveOrUpdate" type="success">提交</el-button>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import Dic from "@/utils/dic"
import expoApi from "@/api/expo";
import type {FormInstance} from 'element-plus'
import {ElMessage} from "element-plus";
import {ref} from "vue";
import userApi from "@/api/user";

export default {
  name: "expoListDetail",
  props: {
    modelValue: {},
    info: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  setup() {
    const formRef = ref<FormInstance>();
    return {formRef}
  },
  data() {
    return {
      Dic,
      visible: false,
      userList: [],
      formData: {
        title: "",
        sort: 0,
        status: 1,
        remark: "",
        file: "",
        rFile2: "",
        fzrId: "",
        imageUrl: ""
      },
    };
  },
  watch: {
    modelValue(value) {
      this.visible = value
      if(!value){
        return
      }
      this.loadSeller()
      if (this.info.id) {
        this.$nextTick(() => {
          this.formData = {...this.info};
          if (this.formData.rFile2) {
            this.formData.imageUrl = Dic.OldFile(this.formData.rFile2)
          }
          if (this.formData.file) {
            this.formData.imageUrl = Dic.imgUrl(this.formData.file)
          }
        })
      }
      if (this.formRef) {
        this.formData.imageUrl = "";
        this.formRef.resetFields()
      }
    },
  },
  methods: {
    loadSeller() {
      userApi.sellerList().then(res => this.userList = res.data)
    },
    saveOrUpdate() {
      expoApi.expoSave(this.formData).then(res => {
        if (res.flag) {
          this.close();
          this.refresh();
        }
      })
    },
    upload(res, uploadFile) {
      if (!res.flag) {
        return ElMessage.warning("上传失败，请重试")
      }
      this.formData.file = res.data
      this.formData.imageUrl = URL.createObjectURL(uploadFile.raw!)
    },
  }
}
</script>
<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>